<template>
    <div>
        <!-- 搜索栏对象 -->
        <el-form ref="form" :model="searchForm" :inline="true">
        <el-form-item>
            <el-input v-model="searchForm.fanName" placeholder="请输入要搜索的粉丝名"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button @click="searchFanInfo">搜索</el-button>
            <el-button type="primary" @click="dialogFormVisible=true">新建</el-button>
            <el-popconfirm title="确认要删除用户信息吗？" @confirm="deleteFans">
                <el-button slot="reference" type="danger" :disabled="deleteAllBtnStu">批量删除</el-button>        
            </el-popconfirm>
        </el-form-item>
        </el-form>

        <el-table :data="tableData" border style="width: 100%; margin-bottom: 20px;" :cell-style="{padding:'2px'}" @selection-change="selectionChange">
            <el-table-column type="selection" width="50">
            </el-table-column>
            <el-table-column label="头像" width="55">
                <!-- 头像数据 scope代表循环中的每一行(一行的数据) -->
                <template slot-scope="scope">
                    <el-avatar size="small" :src="scope.row.avatar"></el-avatar>
                </template>
            </el-table-column>
            <el-table-column label="昵称" width="150" prop="name">
            </el-table-column>
            <el-table-column label="邮箱" width="200" prop="email">
            </el-table-column>
            <el-table-column label="评论" width="200">
                <template slot-scope="scope">    
                    <el-popover
                     placement="bottom"
                     title="最新评论"
                     width="200"
                     trigger="click"
                     :content=scope.row.content>
                          <el-button slot="reference" size="small" @click="scope.row.is_dot=false">评论</el-button>
                     </el-popover>
                     &nbsp;
                     <el-badge :is-dot=scope.row.is_dot class="item" >              
                    </el-badge>
                </template>
            </el-table-column>
            <el-table-column label="性别" width="100" prop="sex">
                <template slot-scope="scope">
                    <p v-if="scope.row.sex==0">男</p>
                    <p v-else-if="scope.row.sex==1">女</p>
                </template>
            </el-table-column>
            <el-table-column label="状态" width="100">
                <template slot-scope="scope">
                    <el-tag size="mini" v-if="scope.row.statu===1" type="success">正常</el-tag>
                    <el-tag size="mini" v-else-if="scope.row.statu===0" type="danger">禁用</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="创建时间" width="200">
                <template slot-scope="scope">
                    {{ scope.row.created | fmtDate }}
                </template>
            </el-table-column>
            <el-table-column label="操作" >
                <template slot-scope="scope">
                    <el-button type="text" @click="editFans(scope.row.id)">编辑</el-button>
                    <el-divider direction="vertical"></el-divider>
                    <el-button type="text" @click="resetPass(scope.row.id,scope.row.name)">重置密码</el-button>
                    <el-divider direction="vertical"></el-divider>
                    <el-popconfirm title="确认要删除该用户信息吗？" @confirm="deleteFans(scope.row.id)">
                        <el-button slot="reference" type="text">删除</el-button>
                    </el-popconfirm>
                    <el-divider direction="vertical"></el-divider>
                    <el-popconfirm title="确认要将此用户加入黑名单吗？" @confirm="kickFans(scope.row.id)">
                        <el-button slot="reference" type="text">加入黑名单</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <!-- 显示分页页码 -->
        <el-pagination background layout="total,prev,pager,next,jumper" :total="total" :page-size="size"
        :page-sizes="[5,10,15,20,25]" :current-page="current">
        </el-pagination>

         <!-- 新建粉丝和编辑粉丝的对话框 -->
         <el-dialog title="用户信息" :visible.sync="dialogFormVisible" width="600px" :before-close="handleClose">
            <el-form :model="FanForm" ref="FanForm" label-width="100px" :rules="rules">
                <el-form-item label="用户头像" label-width="100px">
                <el-upload class="avatar-uploader" action="/api/upload"
                  :show-file-list="false"  :on-success="handleAvatarSuccess" headers="headers">
                  <!-- 上传头像成功后，会获得上传图片在服务器上的路径，设置给img标签进行回显 -->
                  <img v-if="FanForm.avatar" :src="FanForm.avatar" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>     
               </el-form-item>
                <el-form-item label="粉丝名" label-width="100px" prop="name">
                   <el-input v-model="FanForm.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" label-width="100px" prop="email">
                   <el-input v-model="FanForm.email" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="评论" label-width="100px" prop="content">
                   <el-input v-model="FanForm.content" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="性别" label-width="100px">
                    <el-radio-group v-model="FanForm.sex">
                      <el-radio :label="0">男</el-radio>
                      <el-radio :label="1">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="状态" label-width="100px" >
                    <el-radio-group v-model="FanForm.statu">
                      <el-radio :label="0">禁用</el-radio>
                      <el-radio :label="1">正常</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item>
                   <el-button type="primary" @click="submitForm('FanForm')">保存用户</el-button>
                   <el-button @click="resetForm('FanForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>


    export default {
        data(){
            return {
                headers:{
                    token:this.$getSessionStorage('token')
                },
                dialogFormVisible:false,
                deleteAllBtnStu:true,
                //搜索栏对象
                searchForm:{
                    fanName:'',
                },
                tableData:[],
                total: 0,
                size: 0,//一页显示的记录数
                current: 0,//当前显示的页码
                FanForm:{
                    id: 1,
                    name:'',
                    statu: 1,
                    sex:0,
                    avatar:'',
                    email: '',
                    tel: '',
                    content:'',
                    is_dot:true,
                },
                rules:{
                    name:[
                        {required:true,message:'请输入粉丝名',trigger:'blur'}
                    ],
                    email:[
                        {required:true,message:'请输入邮箱',trigger:'blur'}
                    ],
                    content:[
                        {required:true,message:'请输入评论',trigger:'blur'},

                    ],
                }
            }
        }, 
        mounted(){
            this.loadFanList()            
        },
        filters:{
            fmtDate:(value) => {
                let date=new Date(value)
                let y = date.getFullYear()
                let M = (date.getMonth()+1).toString().padStart(2,'0')
                let d = date.getDate().toString().padStart(2,'0')

                let h = date.getHours().toString().padStart(2,'0')
                let m = date.getMinutes().toString().padStart(2,'0')
                let s = date.getSeconds().toString().padStart(2,'0')
                
                return `${y}年${M}月${d}日 ${h}:${m}:${s}`
            }
        },
        methods:{
            handleClose(){
                this.resetForm('FanForm')
                this.dialogFormVisible=false
            },            
            loadFanList(){
                this.$axios.get('/system/fans/list',{
                    current:this.current, //要请求显示第几页 2
                    size:this.size,//请求一页显示多少条 5
                })
                .then(response => {
                    this.tableData = response.data.data.records
                    this.total = response.data.data.total
                    this.size = response.data.data.size
                    this.current = response.data.data.current
                })
            },
            //删除粉丝
            deleteFans(id){ 
                //单个删除用户和批量删除用户
                //如果id有值，表示单个删除，如果id没有值，表示进行批量删除(批量删除用户数据 this.selection)
                let ids = [] // 表示要删除的一组用户的id
                id ? ids.push(id) : this.selection.forEach(u => {
                    ids.push(u.id)
                })
                //ids存储就是单个删除的用户ID，或者批量删除的用户ID
                this.$axios.post('/system/fans/delete',ids).then(response => {
                    this.$message({
                        message:response.data.message,
                        type:'success',
                        showClose:true,
                        //定义一个关闭消息框回调，需要重新加载用户的数据
                        onClose:() => {
                            this.loadFanList()
                        }
                    })
                })
            },
            kickFans(id){
                //单个删除用户和批量删除用户
                //如果id有值，表示单个删除，如果id没有值，表示进行批量删除(批量删除用户数据 this.selection)
                let ids = [] // 表示要删除的一组用户的id
                id ? ids.push(id) : this.selection.forEach(u => {
                    ids.push(u.id)
                })
                //ids存储就是单个删除的用户ID，或者批量删除的用户ID
                this.$axios.post('/system/fans/kick',ids).then(response => {
                    this.$message({
                        message:response.data.message,
                        type:'success',
                        showClose:true,
                        //定义一个关闭消息框回调，需要重新加载用户的数据
                        onClose:() => {
                            this.loadFanList()
                        }
                    })
                })
            },
            searchFanInfo(){
                // let searchArray=[]
                // this.tableData(forEach(func => {
                //     console.log(item,index,arr)
                // }))

                // if(this.FanForm.name==RegExp(this.searchForm.fanName))
            },
            handleAvatarSuccess(){

            },
            resetForm(formName){
                this.FanForm=[]
                this.$refs.FanForm.resetFields()
            },
            submitForm(formName){
                this.$refs.FanForm.validate(valid => {
                    if(valid){
                        //提交保存新建用户数据：不包括用户头像
                        this.$axios.post('/system/fans/'+(this.FanForm.id?'update':'save'),this.FanForm)
                        .then(response => {
                            this.$message({
                                message:response.data.message,
                                type:'success',
                                duration:1200,
                                // showClose:true,
                                onClose:() => {
                                    this.loadFanList() //新建用户成功后，需要重新加载用户数据
                                    this.dialogFormVisible = false //用户保存成功，对话框隐藏
                                    this.resetForm(formName) //用户保存成功，表单重置
                                }
                            })
                        })
                    }
                })
            },
            editFans(id){
                //根据角色的id查询该角色的详细信息
         this.$axios('/fans/fansinfo' + id).then(response => {
          this.FanForm = response.data.data//Roleform和角色中的表单时双向绑定 所以roleform有数据表单就有数据
          this.dialogFormVisible = true  //显示对话框
        })
            },
            resetPass(){},
            //选中表格中复选框 ，参数value就是选中行对象 (选中行 的用户数据) 返回一个数组
            selectionChange(value){
                this.selection = value //selection数组中存放的就是选中所有的用户对象数据
                if(this.selection){
                    //如果seleciton数组中有数据，代表页面上是有选中的用户的，就修改批量删除为可用
                    this.deleteAllBtnStu = (this.selection.length === 0) //直接给false，或者判断数组如果长度为0，表示没有数据，赋值true(表示不可用)
                }
            },
        },
        components:{

        }
    }
</script>
<style scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #999;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

.el-table__body {
  font-size: 14px;
}

.el-button:hover {
  color: #333
}

.el-popconfirm-reference {
  cursor: pointer;
}

.el-pagination {
  display: flex;
  justify-content: flex-end;
}

.el-tag {
  font-size: 12px;
  padding: 2px 6px;
}

.el-table-column--selection {
  text-align: center;
}

.el-avatar {
  border-radius: 50%;
}

.el-divider {
  margin: 0 6px;
}

/*上传头像*/
/*.avatar-uploader {*/
/*  border: 1px dashed #d9d9d9;*/
/*  border-radius: 6px;*/
/*  cursor: pointer;*/
/*  position: relative;*/
/*  overflow: hidden;*/
/*}*/

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.el-dialog {
  text-align: center;
}

/* Style the dialog header */
.el-dialog__header {
  background-color: #2f4050;
  color: #fff;
  border-radius: 4px 4px 0 0;
  border-bottom: none;
}

/* Style the dialog title */
.el-dialog__title {
  font-size: 22px;
  font-weight: bold;
  padding: 20px;
}

/* Style the form labels */
.el-form-item__label {
  font-weight: bold;
  font-size: 16px;
  color: #333;
}

/* Style the input fields */
.el-input__inner {
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  color: #606266;
}

/* Style the radio buttons */


.el-radio-button {
  flex: 1;
}

.dialog-footer {
  padding: 20px;
  text-align: right;
  border-top: 1px solid #ebeef5;
  border-radius: 0 0 4px 4px;
}

.dialog-footer .el-button {
  margin-left: 10px;
  border-radius: 4px;
}

.dialog-footer .el-button--primary {
  background-color: #409EFF;
  border-color: #409EFF;
}

.dialog-footer .el-button--primary:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}

.dialog-footer .el-button--primary:active {
  background-color: #3a8ee6;
  border-color: #3a8ee6;
}

.dialog-footer .el-button--default {
  color: #333;
  border-color: #dcdfe6;
}

.dialog-footer .el-button--default:hover {
  color: #409EFF;
  border-color: #409EFF;
}
</style>